<template>
  <div class="search">
    <header>
      <span @click="returnup">〈</span>
      <van-search
        class="van-search"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        shape="round"
        @input="onLoad"
      >
        <template #action>
          <div @click="onSearch" class="v-search">搜索</div>
        </template>
      </van-search>
    </header>
    <div v-show="bigshow">
      <div class="history" v-show="isshow">
        <p>
          <span>历史记录</span>
          <van-icon name="delete" />
        </p>
        <ul>
          <li @click="handelClick(item)" v-for="(item , index) in iptHistory" :key="index">{{item}}</li>
        </ul>
        <p>大家都在搜</p>
        <ul>
          <li v-for="(item , index) in hotSearch" :key="index">{{item}}</li>
        </ul>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        v-show="statu"
      >
        <li @click="handelClick(item.sw)" v-for="(item , index ) in list" :key="index" name="item" class="search-list">{{item.sw}}</li>
      </van-list>
    </div>

    <div class="sDetails" v-show="!bigshow">
      <van-tabs @click="onClick" v-model="activeName" :border="false" color="white" title-active-color="#804097">
        <van-tab :title="item.desc"  :name="item.ascCode" v-for="(item ,index) in topTitle" :key="index">
        <router-link to="/home/99999999/111">
         <div class="search-shop" v-for="(item ,index) in searchList" :key="index">
            <div class="search-shop-left">
              <img
                :src="item.data[0].image"
              />
            </div>
            <div class="search-shop-right">
              <span class="title">{{item.data[0].title}}</span>
              <span class="instro">{{item.data[0].salePoint}}</span>
              <span class="allpay">一起拼</span>
              <span class="made">{{item.data[0].background}}</span>
              <span class="price">￥{{item.data[0].salesVolume7}}</span>
              <span class="message">{{item.data[0].commentInfo}}</span>
            </div>
          </div>
        </router-link>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import { List } from "vant";
const qs = require("querystring");
Vue.use(List);

export default {
  data() {
    return {
      value: "",
      list: [],
      finished: true,
      loading: true,
      iptHistory: ['书包'],
      isshow: true,
      statu: false,
      hotSearch: ["疯狂上新", "运动鞋男款夏季", "泳衣女"],
      bigshow: true,
      activeName: "normal",
      searchList:'',
      topTitle:'',
      odb:'normal'
    };
  },
  created() {
    this.iptHistory =JSON.parse(window.localStorage.getItem('search') || [])
    this.iptHistory = new Set(this.iptHistory)
    // this.iptHistory = [...this.iptHistory]
    this.iptHistory = Array.from(this.iptHistory)
  },
  methods: {
    handelClick(data){
      this.value = data
      this.onSearch()
    },
    onClick(name,title){
      this.odb = name
      axios({
        url:
          `/llll?pf=nweb&sp=${encodeURIComponent(encodeURIComponent('q='))+encodeURIComponent(encodeURIComponent(encodeURIComponent(this.value)))}&odb=${this.odb}&queryFrom=5&toActivity=0`,
      })
        .then(data => {
          this.searchList = data.data.data.blockData[0].templates
        })
    },
    returnup() {
      if (!this.bigshow) {
        this.bigshow = true;
        return false;
      } else {
        history.go(-1);
      }
    },
    onSearch() {
      if (!this.value) {
        return false;
      }
      this.iptHistory.push(this.value)
      this.iptHistory = new Set(this.iptHistory)
      this.iptHistory = [...this.iptHistory]
      window.localStorage.setItem('search',JSON.stringify(this.iptHistory))
      axios({
        url:
          `/llll?pf=nweb&sp=${encodeURIComponent(encodeURIComponent('q='))+encodeURIComponent(encodeURIComponent(encodeURIComponent(this.value)))}&odb=${this.odb}&queryFrom=5&toActivity=0`,
      })
        .then(data => {
          this.searchList = data.data.data.blockData[0].templates
          this.topTitle = data.data.data.topPanel.orderByList
        })
        .catch(err => console.log(err));
      this.bigshow = false;
    },
        
     onLoad() {
      if (!this.value) {
        this.isshow = true;
        this.statu = false;
        return false;
      }
       axios({
        url: "/search",
        method: "post",
        data: "inputquery=" + this.value
      }).then(data => {
        this.list = data.data.data.suggestionwords;
        this.isshow = false;
        this.statu = true;
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.search {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    height: 0.86rem;
    display: flex;
    align-items: center;

    .van-search {
      flex: 9;
      height: 0.86rem;

      .v-search {
        font-size: 0.26rem;
        color: #7f4395;
      }
    }

    span {
      width: 0.4rem;
      height: 0.86rem;
      line-height: 0.86rem;
      text-align: center;
      flex: 1;
      font-size: 0.4rem;
    }
  }

  .history {
    width: 100%;
    height: 1.45rem;
    padding: 0 0.2rem;
    box-sizing: border-box;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;

    p {
      height: 0.65rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.3rem;
    }

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.2rem #f2f2f2 solid;

      li {
        // width 0.82rem
        height: 0.56rem;
        border-radius: 0.3rem;
        background-color: rgb(245, 245, 245);
        text-align: center;
        line-height: 0.56rem;
        margin-right: 0.1rem;
        padding: 0.05rem 0.1rem;
        box-sizing: border-box;
      }
    }
  }

  .search-list {
    height: 0.88rem;
    width: 100%;
    line-height: 0.88rem;
    padding-left: 0.3rem;
    box-sizing: border-box;
  }

  .sDetails {
    width: 100%;
    height: 100%;

    .search-shop {
      width: 100%;
      height: 3rem;
      display: flex;
      align-items: center;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      margin-bottom: 0.1rem;
    //   border-top: 2px #999999 solid;
      padding 0.2rem

      .search-shop-left {
        flex: 2;

        img {
          width: 2.66rem;
          height: 2.66rem;
        }
      }

      .search-shop-right {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0.2rem;
        box-sizing: border-box;

        .title {
          font-size: 0.28rem;
          color: #4a4a4a;
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
        }

        .instro {
          font-size: 0.24rem;
          color: #999999;
          word-wrap: break-word;
          word-break: normal;
          margin-bottom: 0.1rem;
        }

        .allpay {
          width: 1rem;
          font-size: 0.2rem;
          color: #fb4c81;
          border: 1px solid #fb4c81;
          text-align: center;
          line-height: 0.3rem;
        }

        .made {
          font-size: 0.24rem;
          color: #bf9e6b;
        }

        .message {
          font-size: 0.2rem;
          color: #bbbbbb;
        }

        .price {
          font-size: 0.32rem;
          color: #f7a701;
        }
      }
    }
  }
}
</style>